<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogAudit.visible"
    :width="900"
    :title="dialogAudit.title"
    draggable
    close-icon="CloseBold"
    @close="closeDialog(false)"
  >
    <el-descriptions v-loading="loading" :column="2">
      <el-descriptions-item label="项目名称">{{ detailInfo.projectName }}</el-descriptions-item>
      <el-descriptions-item label="项目编号">{{ detailInfo.projectNum }}</el-descriptions-item>
      <el-descriptions-item label="施工总承包单位">{{ detailInfo.paymentName }}</el-descriptions-item>
      <el-descriptions-item label="施工总承包信用代码">{{ detailInfo.paymentCode }}</el-descriptions-item>
      <el-descriptions-item label="建设单位">{{ detailInfo.guaranteeAccountCode }}</el-descriptions-item>
      <el-descriptions-item label="建设单位信用代码">{{ detailInfo.guaranteeAccountTypeName }}</el-descriptions-item>
      <el-descriptions-item label="项目负责人">{{ detailInfo.depositeTypeName }}</el-descriptions-item>
      <el-descriptions-item label="项目负责人联系电话">{{ detailInfo.payable }}</el-descriptions-item>
      <el-descriptions-item label="调整历史月度">{{ detailInfo.superintendentMobile }}</el-descriptions-item>
      <el-descriptions-item label="历史项目状态">{{ detailInfo.paid }}</el-descriptions-item>
      <el-descriptions-item label="当前项目状态">{{ detailInfo.difference }}</el-descriptions-item>
      <el-descriptions-item label="申请证明材料">
        <div v-for="item in detailInfo.attachments" :key="item.attachmentId">
          <el-link type="primary">{{ item.attachmentName }}</el-link>
        </div>
      </el-descriptions-item>
      <!-- 工程担保公司保函账户 -->
      <el-descriptions-item label="申请时间">{{ detailInfo.superintendent }}</el-descriptions-item>
      <el-descriptions-item label="申请说明">{{ detailInfo.superintendentMobile }}</el-descriptions-item>

      <el-descriptions-item label="复核结果">{{ detailInfo.superintendentMobile }}</el-descriptions-item>
      <el-descriptions-item label="复核意见">{{ detailInfo.superintendentMobile }}</el-descriptions-item>
      <el-descriptions-item label="复核时间">{{ detailInfo.superintendentMobile }}</el-descriptions-item>
      <el-descriptions-item label="复核前项目状态">{{ detailInfo.superintendentMobile }}</el-descriptions-item>
      <el-descriptions-item label="复核后项目状态">{{ detailInfo.superintendentMobile }}</el-descriptions-item>
      <el-descriptions-item label="复核人姓名">{{ detailInfo.superintendentMobile }}</el-descriptions-item>
      <el-descriptions-item label="复核人身份证号">{{ detailInfo.superintendentMobile }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ProjectGuaranteePaymentAuditForm } from "@/api/guarantee/types";
import { GetProjectGuaranteePayment, AuditProjectGuaranteePayment } from "@/api/guarantee/index";
import { FormRules } from "element-plus";

const props = defineProps({
  dialogAudit: {
    type: Object,
    default: () => ({
      visible: false,
      title: "开户审批",
      footBtn: "确认提交",
      id: 0,
      type: 1,
    }),
  },
});

const { dialogAudit } = toRefs(props);

const yesChecked = ref(false);
const noChecked = ref(false);

const emit = defineEmits(["sendClose"]);

const loading = ref(false);
const detailInfo = ref<any>({});
const formData = reactive<ProjectGuaranteePaymentAuditForm>({});
const addOrEditFormRef = ref(ElForm);

const rules = reactive<FormRules<ProjectGuaranteePaymentAuditForm>>({
  status: [{ required: true, message: "请选择审批意见", trigger: "blur" }],
  checkReason: [{ required: true, message: "请输入审核意见", trigger: "blur" }],
});

watch(
  () => dialogAudit.value.visible,
  () => {
    if (dialogAudit.value.visible) {
      loading.value = true;
      GetProjectGuaranteePayment(dialogAudit.value.id)
        .then((res) => {
          Object.assign(detailInfo.value, res.data);
        })
        .finally(() => {
          loading.value = false;
        });
    }
  }
);

/**
 * 关闭弹窗
 */
function closeDialog(query: boolean) {
  emit("sendClose", query);
  resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
  addOrEditFormRef.value.resetFields();
  addOrEditFormRef.value.clearValidate();
  formData.id = undefined;
}

/**
 * 项目表单提交
 */
function handleSubmit() {
  addOrEditFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      formData.id = dialogAudit.value.id;
      AuditProjectGuaranteePayment(formData)
        .then((res) => {
          if (res.success) {
            closeDialog(true);
          } else {
          }
        })
        .finally(() => (loading.value = false));
    }
  });
}
</script>

<style lang="scss" scoped>
.d_left {
  margin-left: 10px;
}
:deep(.el-form-item) {
  flex-wrap: wrap;
}

:deep(.el-input) {
  width: 80%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-input__wrapper) {
  width: 100%;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
</style>
